CSS Full Course Day 13 [Hindi] 💻 | Transitions (Smooth Animations) 🚀 | Mohit Decodes
✨ CSS Tutorial – Day 13: Transitions (Smooth Animations)
Welcome to Day 13 of the CSS Full Course [Hindi] by Mohit Decodes! Today, we’ll learn how to create smooth animations using CSS Transitions — making your websites more interactive and visually appealing.
🔹 What are CSS Transitions?
Transitions allow you to change CSS property values smoothly (over a duration) rather than instantly. This adds life to hover effects, button clicks, and more.
🔹 Basic Transition Properties
| PropertyDescription | |
transition-property | Which CSS property to animate (e.g., background-color) |
transition-duration | How long the animation lasts (e.g., 0.5s) |
transition-timing-function | Speed curve of animation (ease, linear, ease-in-out) |
transition-delay | Delay before the animation starts (e.g., 0.2s) |
⚙️ Example CSS:
css
CopyEdit
.button {
background-color: #2196F3;
color: white;
padding: 15px 30px;
border: none;
cursor: pointer;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: #0b7dda;
}
💡 Tips:
- Use transitions for smooth hover effects, color changes, size changes, and more
- Avoid animating expensive properties like
widthorheightfrequently for performance - Combine with
transformfor smooth movement animations